<style scoped lang="less">
	.bound-item-wrap {
		display: flex;
		flex-wrap: wrap;
		min-height: 50vh;
		align-items: flex-start;
	}
	
	.bound-item-img {
		width: 118px;
		height: 118px;
	}
	
	.bound-item {
		position: relative;
		padding: 4px;
		transition: box-shadow ease 1s;
		text-align: center;
		width: 126px;
		border-radius: 4px;
		border: #dddfe4 1px solid;
	}
	
	.bound-item:hover {
		box-shadow: #dddfe4 1px 1px 6px 2px;
	}
	
	.bound-item-title {
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
	}
	
	.bound-btn-wrap {
		text-align: right;
	}
	.bound-select-item-cover {
		width: 118px;
		position: absolute;
		left: 4px;
		display: flex;
		justify-content: center;
		align-items: center;
		height: calc(100% - 8px);
		background-color: rgba(150,152,158,0.5);
		opacity: 0;
		transition: opacity 300ms ease-in-out;
	}
	.bound-select-item-cover:hover{
		opacity: 1;
	}
	.bound-item-del{
		cursor: pointer;
	}

</style>
<template>
	<div>
		<Row>
			<Col span="24">
				<Card style="margin-bottom: 10px">
					<div class="bound-btn-wrap">
						<Button style="margin-right: 20px" type="default" @click="add">添加</Button>
						<Button type="primary" @click="search">{{ $t('refresh_button') }}</Button>
					</div>
				</Card>
			</Col>
		</Row>
		<Row>
			<Col span="24">
				<Card>
					<div class="bound-item-wrap">
						<div class="bound-item" v-for="tab in tableData">
							<span class="bound-select-item-cover">
								<Icon class="bound-item-del" @click="del(tab.goods_id)" type="md-trash" :size="30" color="white"/>
							</span>
							<img class="bound-item-img" :src="GLOBAL.getUrl(tab.imgs[0],true)">
							<div class="bound-item-title">{{tab.title}}</div>
						</div>
					</div>
					<div class="margin-top-15" style="text-align: center">
						<Page :total="tableShow.listCount" :current="tableShow.currentPage"
						      :page-size="tableShow.pageSize" @on-change="changePage"
						      @on-page-size-change="changeSize" show-elevator show-sizer show-total></Page>
					</div>
				</Card>
			</Col>
		</Row>
		<Modal  v-model="modalSetting.show" width="80%">
			<ActiveSelect v-if="modalSetting.show" @active-selected="select"></ActiveSelect>
			<div slot="footer">
				<Button type="text" @click="cancel" style="margin-right: 8px">取消</Button>
				<Button type="primary" @click="ok" :loading="modalSetting.loading">确定</Button>
			</div>
		</Modal>
	</div>
</template>
<script>
  import ActiveSelect from '@/components/select-subject/active-select'

  import {boundList, bind,unbind} from '@/api/subject'
  import {forEach} from "../../libs/tools";

  export default {
    name: 'bound',
    components: {
      ActiveSelect
    },
    data() {
      return {
        sub_id: null,
        modalSetting: {
          show: false,
          loading: false
        },
        tableData: [],
        tableShow: {
          currentPage: 1,
          pageSize: 20,
          listCount: 0
        },
        selectedList: []

      };
    },
    watch: {
      // 监听相同路由下参数变化的时候，从而实现异步刷新
      '$route'(to, from) {
        // 重置数据
        Object.assign(this.$data, this.$options.data());
        /** 初始化其他数据 */
        this.init();
      }
    },
    created() {
      this.init()
    },

    props: {},
    methods: {
      init() {
        this.sub_id = this.$route.params.sub_id;
        this.getList()
      },
      ok() {
        let vm = this;
        vm.modalSetting.loading = true;
        bind({goods_ids: this.selectedList,sub_id: vm.sub_id}).then(rep => {
          vm.modalSetting.show = false;
          vm.modalSetting.loading = false;
          vm.getList();
        }, error => {
          vm.modalSetting.loading = false;
        });
      },
	    del(goods_id){
        let vm = this;
        unbind({goods_ids:[goods_id],sub_id:vm.sub_id}).then(rep=>{
          vm.getList();
        })
	    },
      cancel() {
        this.modalSetting.show = false;
      },
      add() {
        this.modalSetting.show = true;
      },
      changePage(page) {
        this.tableShow.currentPage = page;
        this.getList()
      },
      changeSize(size) {
        this.tableShow.pageSize = size;
        this.getList()
      },
      search() {
        this.tableShow.currentPage = 1;
        this.getList()
      },
      getList() {
        let vm = this
        let params = {
          sub_id: vm.sub_id,
          page: vm.tableShow.currentPage,
          size: vm.tableShow.pageSize
        };
        boundList(params).then(response => {
          vm.tableData = [];
          forEach(response.data.data.list, (item) => {
            item.imgs = JSON.parse(item.banner);
            vm.tableData.push(item);
          });
          vm.tableShow.listCount = response.data.data.count;
        })
      },
      select(data) {
        if (data.selected) {
          this.selectedList.push(data.value);
        } else {
          for (let i = 0; i < this.selectedList.length; i++) {
            if (this.selectedList[i] === data.value) {
              this.selectedList.splice(i, 1);
            }
          }
        }
      }
    }
  };
</script>
